<template>
  <a-layout id="components-layout-demo-top" class="layout">

    <Header></Header>

    <a-layout-content style="padding: 0 0; height: 700px">
      <div class="content-bg">

        <div class="main-container">
          <div class="main-header">
            <p class="main-title"><a href="#">{{mainTitle}}</a></p>
            <p class="sub-title">
              全球领先品牌使用的设计、创意、营销、体验<br>
              供给平台和数据智能解决方案
            </p>
            <p class="tail-text">
              <img style="width:25px;height:25px" src="../../assets/play.png">
              &emsp;观看视频了解详情
            </p>

          </div>

          <div class="sub-header">
            <div class="card-container">
              <IndexCard :title="subTitle1" :subTitle="subTitleBody1" :buttonText="'了解更多'" @clickCallBack="callBack1">
              </IndexCard>
              <IndexCard :title="subTitle2" :subTitle="subTitleBody2" :buttonText="'了解更多'" @clickCallBack="callBack2">
              </IndexCard>
            </div>
          </div>
        </div>

      </div>

    </a-layout-content>
    <div>
      <div>
        <Tender></Tender>
      </div>
    </div>
    <div>
      <div>
        <Company></Company>
      </div>
    </div>

    <FooterMore></FooterMore>

  </a-layout>
</template>

<script>
import FooterMore from "@/components/views/FooterMore.vue";
import IndexCard from "@/components/views/IndexCard.vue";
import Company from "@/components/views/Company.vue";
import Tender from "@/components/views/Tender.vue";
import Header from "@/components/views/Header.vue"


export default {
  name: "Index",
  components: {
    Header,
    FooterMore,
    IndexCard,
    Company,
    Tender,
  },
  data() {
    return {
      mainTitle: "创意赋能万物",
      subTitle1: "创意供给平台",
      subTitleBody1: ["全方位解决营销创意需求", "助力企业指数级增长"],
      subTitle2: "数据智能解决方案",
      subTitleBody2: ["智能化管理创意服务商", "赋能企业数字化升级"]
    };
  },
  methods: {
    callBack1() {
      // 回调1
      console.log();
      this.$router.push("/page1");
    },
    callBack2() {
      // 回调2
      this.$router.push("/page2");
    }
  }
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #fff;
}
a:hover {
  color: #dcdcdc;
}

.main-container {
  padding-top: 130px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.main-header {
  text-align: left;
  margin-left: 5%;
  background-color: transparent;
}

.sub-header {
  margin-top: 100px;
  width: 100%;
}
.card-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.main-title {
  font-size: 35px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 3px;
}

.sub-title {
  font-size: 20px;
  color: #dcdcdc;
  letter-spacing: 1.5px;
  line-height: 35px;
}

.tail-text {
  color: #35bfa5;
  font-size: 18px;
  float: right;
}

.content {
  background: #fff;
  padding: 24px;
  min-height: 380px;
}

.content-bg {
  width: 100%;
  /* min-height: 590px; */
  height: 100%;
  background-image: url("../../assets/home-banner1-pc.jpg");
}
.img-bg {
  padding: 0 !important;
  z-index: -10;
  position: fixed;
}
</style>